<template>
  <view class="body">
    <view class="has_add"
      >已添加<text class="green">{{ familyList.length }}</text
      >人</view
    >
    <view class="lists">
      <uni-swipe-action ref="swipeRef">
        <uni-swipe-action-item
          v-for="(item, index) in familyList"
          :key="index"
          :right-options="options"
          @click="handleClick(item)"
        >
          <view class="item" @click="select(item)">
            <view class="top">
              <text class="name">{{ item.patName }}</text>
              <text v-if="item.relation" class="relation">{{ item.relation }}</text>
              <text v-if="item.isDefault" class="default">默认</text>
            </view>
            <view class="idcard">证件号: {{ item.idNo }}</view>
            <view @tap.stop="update(item)" class="morebtn">
              <image src="@/static/image/form-arrow-right.png" class="img_more" />
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <view class="fixed">
      <button class="confirm_btn" @click="add">添加就诊人</button>
    </view>
    <up-modal
      :show="show"
      :title="'提示'"
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      :confirmColor="'#FF503D'"
      @confirm="deletePatient"
      @close="cancel"
      @cancel="cancel"
    >
      <view
        style="width: 100%; font-size: 30rpx; font-weight: 400; color: #4e5969; text-align: center"
        >确认要删除该就诊人吗?</view
      >
    </up-modal>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { query_patient, del_patient } from '@/api/family'
import { base_info } from '@/api/moreMessage'
import { onShow, onLoad } from '@dcloudio/uni-app'
import store from '@/store'

const type = ref('patient')
const show = ref(false)
const Empi = ref('')
const familyList = ref([])
const options = reactive([
  {
    text: '删除',
    style: {
      backgroundColor: '#ff503d'
    }
  }
])
const swipeRef = ref()
const userInfo = ref({})

onLoad((option) => {
  type.value = option.type ? option.type : 'patient'
})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  init()
})

const init = () => {
  query_patient(userInfo.value.userId).then((res) => {
    familyList.value = res.data
  })
}

const select = (item: any) => {
  if (type.value == 'familys') {
    return
  }
  // 切换默认就诊人
  const params = {
    userId: userInfo.value.userId,
    empi: item.empi
  }
  base_info(params).then((res) => {
    const info = Object.assign({}, JSON.parse(uni.getStorageSync('userInfo')))
    info.patientInfo = res.data
    store.commit('SET_USERINFO', info)
    store.dispatch('app/IM_DESTROY')
    uni.navigateBack({ delta: 0 })
  })
}

const update = (item: any) => {
  uni.navigateTo({
    url: '/packA/pages/family/addOrDelete?type=update&userId=' + item.userId + '&empi=' + item.empi
  })
}

const add = () => {
  uni.navigateTo({
    url: '/packA/pages/family/addOrDelete?type=add'
  })
}

const handleClick = (item: any) => {
  if (item.isDefault) {
    uni.showToast({
      title: '不能删除默认就诊人！',
      icon: 'none'
    })
  } else if (item.hasVip) {
    uni.showToast({
      title: '该就诊人有会员记录，无法删除',
      icon: 'none'
    })
  } else {
    show.value = true
    Empi.value = item.empi
  }
}
const deletePatient = () => {
  uni.showLoading()
  del_patient({ userId: userInfo.value.userId, empi: Empi.value }).then((res) => {
    uni.hideLoading()
    show.value = false
    init()
    if (userInfo.value.patientInfo.empi == Empi.value) {
      // 如果删除的是当前就诊人则将当前就诊人改为默认就诊人
      const defaultEmpi = familyList.value.find((item: any) => {
        return item.isDefault
      })
      base_info({ userId: userInfo.value.userId, empi: defaultEmpi.empi }).then((res) => {
        const info = Object.assign({}, JSON.parse(uni.getStorageSync('userInfo')))
        info.patientInfo = res.data
        store.commit('SET_USERINFO', info)
        store.dispatch('app/IM_DESTROY')
      })
    }
    uni.showToast({
      title: '删除成功',
      icon: 'none',
      duration: 2000
    })
    swipeRef.value.closeAll()
  })
}
const cancel = () => {
  show.value = false
  swipeRef.value.closeAll()
}
</script>

<style lang="scss" scoped>
.body {
  padding: 32rpx 24rpx 168rpx;
  background: #f3f7f8;

  .has_add {
    font-size: 30rpx;
    font-weight: 400;
    color: #222;

    .green {
      color: #00d1b6;
    }
  }

  .lists {
    height: calc(100vh - 280rpx);
    overflow: auto;

    ::v-deep .uni-swipe {
      margin-top: 24rpx;
    }

    ::v-deep .uni-swipe_button {
      font-size: 24rpx;
      font-weight: 400;
      color: #fff;
      border-radius: 0 12rpx 12rpx 0 !important;
    }

    .item {
      position: relative;
      padding: 30rpx 24rpx;
      background: #fff;
      border-radius: 12rpx;

      .top {
        display: flex;
        gap: 24rpx;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 16rpx;

        .name {
          font-size: 32rpx;
          font-weight: 500;
          color: #222;
        }

        .relation {
          box-sizing: border-box;
          height: 40rpx;
          padding: 0 16rpx;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 40rpx;
          color: #666;
          background: #fafafa;
          border: 1px solid #e5e6eb;
          border-radius: 4rpx;
        }

        .default {
          height: 40rpx;
          padding: 2rpx 16rpx 0;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 40rpx;
          color: #fff;
          background: #00d1b6;
          border-radius: 4rpx;
        }
      }

      .idcard {
        font-size: 28rpx;
        font-weight: 400;
        color: #666;
      }

      .morebtn {
        position: absolute;
        top: 0;
        right: 0;
        width: 100rpx;
        height: 160rpx;
        line-height: 160rpx;
        text-align: center;

        .img_more {
          width: 40rpx;
          height: 40rpx;
          transform: translateY(6rpx);
        }
      }
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .confirm_btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}
</style>
